<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Gangsta Socca (maquette)</title>
	
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<style type="text/css">
	
		body {
			color: white;
			font-family: Calibri, Arial, sans-serif;
			background: url(http://2.bp.blogspot.com/-FFEo8jRHyI8/TtEKfbM9UTI/AAAAAAAAADk/Nj1P4BnDyro/s1600/Grass+00+seamless.jpg);
			background-size: 25%;
		}
		
		.h3-wrapper {
			background: rgba(0,0,0,0.25);
			padding: 1em;
			margin-bottom: 1em;
		}
		
		.h3-wrapper h3 {
			margin-top: 0;
		}
		
		h1,h2,h3,h4 {
			color: white;
			text-shadow: 0 0 10px black;
			background: rgba(0,0,0,0.25);
		}
		
		h1 {
			text-align: center;
		}
		
		h3 {
			padding: 0.5em;
		}
		
		.liste {
			display : table;
			table-layout: fixed;
			height : 100%;
			padding: 0;
			
			border: solid 0.5em white;
			border-radius: 0.5em;
			background: url(http://home1.org/wp-content/uploads/2013/03/football-field-grass-background.jpg);
			background-size: 25%;
		}
		
		.liste li {
			display : table-cell;
			height:100%;
			
			text-align: center;
			min-height: 1em;
		}
		
		.joueur {
			background: white;
			border: solid 0.25em black;
			border-radius: 1em;
			box-shadow: 1px 1px 1em black;
			margin: 1em;
			color: black;
		}
		
		li:hover .joueur {
			background-color: #ACF;
			cursor: pointer;
		}
		
		.joueur:active,
		.joueur-selected,
		.joueur-selected:hover {
			background-color: orange;
		}
		
			.liste li img {
				border: solid 0.25em black;
				border-width: 0.25em 0;
				width: 100%;
				cursor: url(http://blackbearwv.com/wp-content/themes/blackbear/images/phone.png) 19 20, pointer;
			}
		
			.liste li .num,
			.liste li .pseudo {
				font-weight: bold;
			}
		
			.liste li .num {
				font-size: 2em;
			}
		
			.liste li .pseudo {
				padding: 0.25em 0.1em;
			}
			
		li .com {
			margin: 1em;
			width: 200px;
			text-shadow: 0 0 20px black;
		}
			
		li:hover .com {
			text-shadow: none;
		}
		
		ul.com li:hover,
		ol.com li:hover{
			background: white;
			color: black;
			cursor: pointer;
		}
			
		.sandwiches {
			font-size: 1.25em;
			text-shadow: 0 0 20px black;
		}
		
	</style>
	
	<script type="text/javascript">
		$(document).ready(function() {
			
			// Click joueur
			$(".joueur").click(function() {
				$(this).toggleClass("joueur-selected");
			});
			
		});
	</script>
	
</head>
<body>

	<h1>Prochain match : 7 mars 2014</h1>	

	<div class="h3-wrapper">
		<h3>Liste des joueurs : 10</h3>
		
		<ol class="liste">
			<li><div class="joueur"><div class="num"> 1</div><a href="sip:babacar.ndiaye@capgemini.com"><img src="http://frrnssai1/Trombi/documents/ACCUEIL/Annuaire/Photos/emp36071.jpg" /></a><div class="pseudo">Matt La Rage</div></div></li>
			<li><div class="joueur"><div class="num"> 2</div><a href="sip:babacar.ndiaye@capgemini.com"><img src="http://frrnssai1/Trombi/documents/ACCUEIL/Annuaire/Photos/emp36071.jpg" /></a><div class="pseudo">Matt La Rage</div></div></li>
			<li><div class="joueur"><div class="num"> 3</div><a href="sip:babacar.ndiaye@capgemini.com"><img src="http://frrnssai1/Trombi/documents/ACCUEIL/Annuaire/Photos/emp36071.jpg" /></a><div class="pseudo">Matt La Rage</div></div></li>
			<li><div class="joueur"><div class="num"> 4</div><a href="sip:babacar.ndiaye@capgemini.com"><img src="http://frrnssai1/Trombi/documents/ACCUEIL/Annuaire/Photos/emp36071.jpg" /></a><div class="pseudo">Matt La Rage</div></div></li>
			<li><div class="joueur"><div class="num"> 5</div><a href="sip:babacar.ndiaye@capgemini.com"><img src="http://frrnssai1/Trombi/documents/ACCUEIL/Annuaire/Photos/emp36071.jpg" /></a><div class="pseudo">Matt La Rage</div></div></li>
			<li><div class="joueur"><div class="num"> 6</div><a href="sip:babacar.ndiaye@capgemini.com"><img src="http://frrnssai1/Trombi/documents/ACCUEIL/Annuaire/Photos/emp36071.jpg" /></a><div class="pseudo">Matt La Rage</div></div></li>
			<li><div class="joueur"><div class="num"> 7</div><a href="sip:babacar.ndiaye@capgemini.com"><img src="http://frrnssai1/Trombi/documents/ACCUEIL/Annuaire/Photos/emp36071.jpg" /></a><div class="pseudo">Matt La Rage</div></div></li>
			<li><div class="joueur"><div class="num"> 8</div><a href="sip:babacar.ndiaye@capgemini.com"><img src="http://frrnssai1/Trombi/documents/ACCUEIL/Annuaire/Photos/emp36071.jpg" /></a><div class="pseudo">Matt La Rage</div></div></li>
			<li><div class="joueur"><div class="num"> 9</div><a href="sip:babacar.ndiaye@capgemini.com"><img src="http://frrnssai1/Trombi/documents/ACCUEIL/Annuaire/Photos/emp36071.jpg" /></a><div class="pseudo">Matt La Rage</div></div></li>
			<li><div class="joueur"><div class="num">10</div><a href="sip:babacar.ndiaye@capgemini.com"><img src="http://frrnssai1/Trombi/documents/ACCUEIL/Annuaire/Photos/emp36071.jpg" /></a><div class="pseudo">Christophe Davoine</div></div></li>
		</ol>
	</div>

	<div class="h3-wrapper">
		<h3>Communiquer</h3>
		
		<ol class="liste com">
			<li><div class="com">A tous</div></li>
			<li><div class="com">Aux joueurs sélectionnés</div></li>
		</ol>
	</div>

	<div class="h3-wrapper">
		<h3>Sandwiches</h3>
		
		<ul class="sandwiches">
			<li><b>3</b> x Club  </li>
			<li><b>1</b> x Jambon</li>
			<li><b>3</b> x Poulet</li>
			<li><b>5</b> x Thon  </li>
		</ul>
	</div>

</body>
</html>